<script setup lang="ts">
import ArrowVue from "@/components/icon/Arrow.vue";
</script>
<template>
    <div class="expert-list flex flex-wrap item">
        <div class="expert-item">
            <div class="expert-port">
                <img src="https://img.cctvch.cn/uploads/8d54dfdb2f00c803a9b4c74cb281abfd.png" alt="">
            </div>
            <h4 class="expert-title font-m font-bold color-title">
                <span>埃里克·索尔海姆 阁下</span>
            </h4>
            <ul class="expert-explain-list">
                <li class="expert-explain-item font font-normal"> 中国环境与发展国际合作委员会副主席</li>
                <li class="expert-explain-item font font-normal">“一带一路”绿色发展国际联盟主席</li>
                <li class="expert-explain-item font font-normal">原联合国副秘书长</li>
                <li class="expert-explain-item font font-normal">原联合国环境规划署执行主任</li>
            </ul>
        </div>
        <div class="expert-item">
            <div class="expert-port">
                <img src="https://img.cctvch.cn/uploads/988691e940d9a661dd972601f66f35e3.png" alt="">
            </div>
            <h4 class="expert-title font-m font-bold color-title">
                <span>拉杰德拉·山地 博士</span>
            </h4>
            <ul class="expert-explain-list">
                <li class="expert-explain-item font font-normal">联合国环境规划署技术经济评估委员会高级专家</li>
                <li class="expert-explain-item font font-normal">原联合国环境规划署臭氧层保护计划主任</li>
                <li class="expert-explain-item font font-normal">2007年度诺贝尔获奖团队 - 联合国政府间气候变化专门委员会核心专家</li>
            </ul>
        </div>
        <div class="expert-item">
            <div class="expert-port">
                <img src="https://img.cctvch.cn/uploads/5d246f9f0c5f5e42770ca5855aa7832a.png" alt="">
            </div>
            <h4 class="expert-title font-m font-bold color-title">
                <span>谌良仲 </span>
            </h4>
            <ul class="expert-explain-list">
                <li class="expert-explain-item font font-normal">守望地球组织联席创始人和首席研究员</li>
                <li class="expert-explain-item font font-normal">世界银行中国保护臭氧层项目顾问</li>
                <li class="expert-explain-item font font-normal">联合国环境规划署朝鲜保护臭氧层项目顾问</li>
            </ul>
        </div>
        <div class="expert-item">
            <div class="expert-port">
                <img src="https://img.cctvch.cn/uploads/456baf20438d12e8351ff96e4ec2d040.png" alt="">
            </div>
            <h4 class="expert-title font-m font-bold color-title">
                <span>马克平</span>
            </h4>
            <ul class="expert-explain-list">
                <li class="expert-explain-item font font-normal">国际生物多样性计划中国委员会秘书长</li>
                <li class="expert-explain-item font font-normal">中国科学院生物多样性委员会秘书长</li>
                <li class="expert-explain-item font font-normal">世界自然保护联盟亚洲区主席</li>
            </ul>
        </div>
        <div class="expert-item">
            <div class="expert-port">
                <img src="https://img.cctvch.cn/uploads/d996a690ddcb2e39065a69ad70b84567.png" alt="">
            </div>
            <h4 class="expert-title font-m font-bold color-title">
                <span>张和民</span>
            </h4>
            <ul class="expert-explain-list">
                <li class="expert-explain-item font font-normal">现任中国大熊猫保护研究中心常务副主任</li>
            </ul>
        </div>
        <div class="expert-item">
            <div class="expert-port">
                <img src="https://img.cctvch.cn/uploads/e2004dbfafba56f5d864068c94f9c80c.png" alt="">
            </div>
            <h4 class="expert-title font-m font-bold color-title">
                <span>陈 宏</span>
            </h4>
            <ul class="expert-explain-list">
                <li class="expert-explain-item font font-normal">海南南海热带海洋研究所所长 </li>
                <li class="expert-explain-item font font-normal">国际知名的珊瑚礁保护专家和海洋生态学家</li>
            </ul>
        </div>
        <div class="expert-item">
            <div class="expert-port">
                <img src="https://img.cctvch.cn/uploads/19a3091afd8024b223aef5790fdef06d.png" alt="">
            </div>
            <h4 class="expert-title font-m font-bold color-title">
                <span>徐福军</span>
            </h4>
            <ul class="expert-explain-list">
                <li class="expert-explain-item font font-normal">阿尔泰山两河源保护区党委书记 </li>
                <li class="expert-explain-item font font-normal">林业高级工程师</li>
            </ul>
        </div>
        <!-- 加载更多 -->
        <div class="expert-more">
            <a href="http://www.operationearth.com.cn" target="_blank">
                <p class="font-m">更多委员介绍</p>
                <p class="font-m">请访问官网</p>
                <section class="read">
                    <section class="arrow arrow-1">
                        <ArrowVue color="#9195A3"></ArrowVue>
                    </section>
                    <section class="arrow arrow-2">
                        <ArrowVue color="#9195A3"></ArrowVue>
                    </section>
                </section>
            </a>
        </div>
    </div>
</template>

<style lang="scss" scoped>
.expert-list {
    margin-top: 10px;

    .expert-item {
        margin-right: 80px;
        margin-bottom: 60px;
        width: 300px;

        &:nth-child(4) {
            margin-right: 0px;
        }

        .expert-port {
            width: 150px;
            height: 150px;
            box-shadow: 0px 5px 26px 3px rgba(98, 102, 117, 0.1500);
            border-radius: 12px;

            img {
                display: block;
                width: 100%;
                height: 100%;
            }
        }

        .expert-title {
            margin: 28px 0 18px;
        }

        .expert-explain-list {
            .expert-explain-item {
                line-height: 22px;

                &::before {
                    content: "";
                    display: inline-block;
                    margin-right: 6px;
                    margin-top: -4px;
                    width: 4px;
                    height: 4px;
                    background: #000;
                    vertical-align: middle;
                    border-radius: 50%;
                }
            }
        }
    }
    .color-title {
        span {
            background-image: linear-gradient(to right, #252086 0%, #e60012 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
    }

    // 加载更多
    .expert-more {
        padding-top: 178px;

        p {
            line-height: 22px;
            color: #000;
        }

        .read {
            margin-top: 16px;
            overflow: hidden;
            position: relative;
            width: 40px;
            height: 16px;
            line-height: 16px;
            text-align: center;
            color: #9195a3;
            border-left: 1px solid #9195a3;

            .arrow {
                position: absolute;
                top: 50%;
                transform: translate(-50%, -50%);
                transition: all 0.36s ease;
            }

            .arrow-1 {
                left: 50%;
                color: #9195a3;
            }

            .arrow-2 {
                left: -50%;
                color: #9195a3;
            }
        }

        &:hover {
            cursor: pointer;

            .arrow-1 {
                left: 150%;
                color: #9195a3;
            }

            .arrow-2 {
                left: 50%;
                color: #9195a3;
            }
        }
    }
}
</style>